<template>
	<view class="goods-search" :class="mode==='goods' ? '' : 'page-view'">
		<view class="header-wrap">
			<u-sticky offset-top="0" h5-nav-height="0">
				<view class="search">
					<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch"
						bg-color="#F4F4F4"></u-search>
				</view>
				<template v-if="mode==='goods'">
					<view v-show="!showHistory" class="header row bg-white">
						<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
						<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
							<text :class="priceSort ? 'primary' : ''">价格</text>
							<view>
								<trigonometry direction="up" size="small"
									:color="priceSort == 'desc' ? '#FF5058' : '#333'">
								</trigonometry>
								<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'">
								</trigonometry>
							</view>
						</view>
						<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
							<text :class="saleSort ? 'primary' : ''">销量</text>
							<view>
								<trigonometry direction="up" size="small"
									:color="saleSort == 'desc' ? '#FF5058' : '#333'">
								</trigonometry>
								<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'">
								</trigonometry>
							</view>
						</view>
						<view v-if="false" class="tag row-center" @tap="changeType">
							<image class="icon-sm"
								:src=" goodsType === 'one' ? '/static/images/icon_double.png' : '/static/images/icon_one.png'">
							</image>
						</view>
					</view>
				</template>
			</u-sticky>
		</view>
		<view v-show="showHistory" class="content bg-white">
			<view v-if="hotTopic.length" class="search-words">
				<view class="title">热点栏目</view>
				<view class="words row wrap">
					<view v-for="(item, index) in hotTopic" :key="index" class="item br60  mr20 mb20 lighter sm line1"
						@tap="onChangeKeyword(item,'post')">{{item.label}}</view>
				</view>
			</view>
			<view v-if="hotCity.length" class="search-words">
				<view class="title">热卖城市</view>
				<view class="words row wrap">
					<view v-for="(item, index) in hotCity" :key="index" class="item br60  mr20 mb20 lighter sm line1"
						@tap="onChangeHotCityKeyword(item,'goods')">{{item.name}}</view>
				</view>
			</view>
			<view class="hot">
				<view class="title">热卖套餐</view>
				<!-- 未登录时展示新人权益 -->
				<active-area type="hot" progressBarColor="#9912FE" :lists="hotProductList">
				</active-area>
			</view>
		</view>
		<view v-show="!showHistory" class="content">
			<view v-if="mode==='goods'">
				<view class="goods-list">
					<view class="one">
						<goods-list :list="indexList.list" type="home-hot"></goods-list>
					</view>
				</view>
				<loading-footer :status="indexList.status" :slot-empty="true">
					<view slot="empty" class="column-center" style="padding-top: 200rpx">
						<image class="img-null" src="/static/images/goods_null.png"></image>
						<text class="lighter">暂无商品</text>
					</view>
				</loading-footer>
			</view>
			<view v-else>
				<view v-show="indexList.list.length>0" class="goods-list">
					<view class="one tiezi">
						<StarPostList :list="indexList.list">
						</StarPostList>
					</view>
				</view>
				<view :class="{'post-footer-bottom': !!indexList.list.length}">
					<loading-footer :status="indexList.status" :slot-empty="true">
						<view slot="empty" class="column-center" style="padding-top: 200rpx;">
							<image class="img-null" src="/static/images/goods_null.png"></image>
							<text class="lighter">暂无帖子</text>
						</view>
					</loading-footer>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsSearch,
		getSearchpage,
	} from "@/api/store";
	import {
		getPost,
		likedPosters
	} from "@/api/discover"
	import {
		mapMutations
	} from 'vuex'
	import {
		trottle,
		loadingFun,
		getRect
	} from "@/utils/tools";
	import {
		loadingType
	} from "@/utils/type";
	import StarPostList from "@/uni_modules/star-community/components/star-post-list/star-post-list.vue";
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		components: {
			StarPostList,
		},
		data() {
			return {
				keyword: "",
				status: loadingType.LOADING,
				page: 1,
				goodsType: "double",
				goodsList: [],
				priceSort: "",
				saleSort: "",
				showHistory: false,
				hotTopic: [{
					"label": "项目科普",
					"id": 73
				}, {
					"label": "看脸设计",
					"id": 74
				}, {
					"label": "大咖医生",
					"id": 77
				}, {
					"label": "真实案例",
					"id": 83
				}, {
					"label": "探店评测",
					"id": 84
				}, {
					"label": "医美行业内幕",
					"id": 85
				}, {
					"label": "韩国医美",
					"id": 86
				}, {
					"label": "香港医美",
					"id": 87
				}],
				hotCity: [{
					name: "北京市",
					param: {
						city: '北京城区',
						province: '北京市'
					}
				}, {
					name: "上海市",
					param: {
						city: '上海城区',
						province: '上海市'
					}
				}, {
					name: "广州市",
					param: {
						city: '广州市',
						province: '广东省'
					}
				}, {
					name: "深圳市",
					param: {
						city: '深圳市',
						province: '广东省'
					}
				}, {
					name: "杭州市",
					param: {
						city: '杭州市',
						province: '浙江省'
					}
				}, {
					name: "成都市",
					param: {
						city: '成都市',
						province: '四川省'
					}
				}, {
					name: "武汉市",
					param: {
						city: '武汉市',
						province: '湖北省'
					}
				}, {
					name: "南京市",
					param: {
						city: '南京市',
						province: '江苏省'
					}
				}, {
					name: "厦门市",
					param: {
						city: '厦门市',
						province: '福建省'
					}
				}, {
					name: "重庆市",
					param: {
						city: '重庆',
						province: '重庆市'
					}
				}],
				mode: "goods",
				hotProductList: [],
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						first_cate_id: null,
						second_cate_id: null,
						third_cate_id: null,
						province: null,
						city: null,
						search_keyword: null,
						merchant_id: null,
						order_column: null, // 排序字段 platform_commission-平台佣金（默认） sale_nunm-销量
						order_value: null, // 排序方式 desc-倒序，默认 asc-升序
						// last_group_limit: 1 // 获取未成团订单数量，默认为1
					},
					list: [],
					status: loadingType.LOADING,
				},
			};
		},
		props: {},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true;
				}
			},
			mode(value, old) {
				if (!value) {
					this.indexList.params.page = 1;
					this.indexList.list = [];
					this.indexList.status = loadingType.LOADING
				}
			}
		},
		computed: {
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this;
				if (priceSort == "" && saleSort == "") {
					return true;
				}

				return false;
			},
		},

		onShareAppMessage(event) {
			if (
				event &&
				event.target &&
				event.target.dataset &&
				event.target.dataset.item
			) {
				let data = event.target.dataset.item;
				return {
					title: data.title,
					path: `pages/goods_details/goods_details?id=${data.id}&marketer_id=${this.$store.getters.userInfo.id}`,
					imageUrl: data.pics[0],
				};
			}
		},

		onLoad(options) {
			this.mode = options.mode || 'goods';
			this.onNormal = trottle(this.onNormal, 500, this);
			this.onPriceSort = trottle(this.onPriceSort, 500, this);
			this.onSaleSort = trottle(this.onSaleSort, 500, this);
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
			this.getHotGoods();
			// this.getSearchpageFun();
		},

		onReachBottom: function() {
			this.getGoodsSearchFun();
		},
		methods: {
			...mapMutations(['UPDATEPOSTLIKES']),
			onChange(e) {
				this.keyword = e.value;
			},

			changeType() {
				this.goodsType = this.goodsType === "one" ? "double" : "one";
			},

			onNormal() {
				this.indexList.params.order_column = null;
				this.indexList.params.order_value = null;
				this.indexList.status = loadingType.LOADING;
				this.onRefresh();
			},

			onPriceSort() {
				let {
					priceSort
				} = this;
				this.saleSort = "";
				this.priceSort = priceSort == "asc" ? "desc" : "asc";
				this.indexList.params.order_column = "platform_commission";
				this.indexList.params.order_value = this.priceSort;
				this.onRefresh();
			},

			onSaleSort() {
				let {
					saleSort
				} = this;
				this.priceSort = "";
				this.saleSort = saleSort == "desc" ? "asc" : "desc";
				this.indexList.params.order_column = "sale_nunm";
				this.indexList.params.order_value = this.saleSort;
				this.onSearch();
			},

			init(option) {
				let {
					id,
					name,
					type
				} = option;
				this.type = type;
				if (id) {
					uni.setNavigationBarTitle({
						title: name,
					});
					this.id = id;
					this.getGoodsSearchFun();
				} else {
					uni.setNavigationBarTitle({
						title: "搜索",
					});
					this.showHistory = true;
				}
			},

			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							hotTopic,
							hotCity
						} = res.data;
						this.hotTopic = hotTopic
						this.hotCity = hotCity
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onSearch();
				}
			},
			onSearch() {
				this.indexList.params.search_keyword = this.keyword;
				this.onRefresh();
			},
			onRefresh() {
				this.showHistory = false;
				this.indexList.params.page = 1;
				this.goodsList = [];
				this.indexList.status = loadingType.LOADING;
				this.$nextTick(() => {
					this.getGoodsSearchFun();
				});
			},

			onChangeKeyword(item, type) {
				console.log(item, 'item')
				uni.navigateTo({
					url: `/social/pages/homepage/homepage?id=${item.id}`
				})
				// this.keyword = item;
				// this.showHistory = false;
				// this.mode = type
				// this.indexList.params.search_keyword = item
				// this.onRefresh();
			},
			onChangeHotCityKeyword(item, type) {
				this.showHistory = false;
				this.mode = type
				this.indexList.params.province = item.param.province
				this.indexList.params.city = item.param.city
				this.onRefresh();
			},
			getPostData(data) {
				const {
					search_keyword
				} = data
				return getPost({
					...data,
					keyword: search_keyword
				}).then(res => {
					let {
						s,
						d
					} = res
					const _data = d?.data?.data;

					if (!_data || _data.length === 0) {
						return {
							s,
							d: {
								data: []
							}
						}
					}
					this.UPDATEPOSTLIKES(_data);

					return {
						s,
						d: {
							data: _data || []
						}
					}
				})
			},
			async getGoodsSearchFun() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const params = {
					...this.indexList.params,
					mode: this.mode
				}
				const api = this.mode === 'goods' ? getGoodsSearch : this.getPostData;
				const data = await loadingFun(
					api,
					this.indexList.params.page,
					this.indexList.list,
					this.indexList.status,
					this.indexList.params
				);
				console.log(data, 'data')
				if (!data) return;
				this.indexList.params.page = data.page;
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},

			async getHotGoods() {
				const {
					d,
					s
				} = await getGoodsSearch({
					page: 1,
					pagesize: 5,
					state: "hot"
				});
				if (s !== 0 || !d?.data) return;
				this.hotProductList = d.data;
			},
		},
	};
</script>
<style lang="scss">
	.goods-search {
		.header-wrap {
			.search {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
			}

			.header {
				height: 80rpx;

				.tag {
					height: 100%;
					flex: 1;
				}
			}
		}

		.content {
			.hot {

				.title {
					padding: 26rpx 24rpx;
				}
			}

			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
				}

				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #f5f5f5;
					}
				}
			}

			.goods-list {
				overflow: hidden;
			}
		}
	}

	.post-footer-bottom {
		.loading-footer {
			background: #f5f5f5;
		}
	}

	.page-view {
		background: #f5f5f5;
		min-height: 100vh;
	}
</style>